<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>keyfocus</title>
    <link rel="stylesheet" href="./highlight-9.12.0.min.css">
  </head>
  <body>
  <script src="./vue.js"></script>
  <script src="./vue-gridkeyfocus.js"></script>
  <script src="./jquery-1.11.1.min.js"></script>
  <script src="./highlight-9.12.0.min.js"></script>
    <div id="app">
      <h2>表格快捷键例子</h2>
      <h5>顺向快捷键：ctrl/enter键</h5>
      <h5>逆向快捷键：ctrl+tab/ctrl+enter键</h5>
      <div class="padding_class" v-gridkeyfocus="gridKeyFlag" :data-current="current3" data-prefix="table_">
        <table>
        <tr v-for="(item,index) in tbData" :key="item.id">
          <td><input v-model="item.text"  :ref="`table_${index}`" @focus="current3=`table_${index}[0]`"></td>
          <td><input :disabled="item.text3Disabeld" v-model="item.text3" :ref="`table_${index}`" @focus="current3=`table_${index}[1]`"></td>
          <td><input v-model="item.text2" :ref="`table_${index}`" @focus="current3=`table_${index}[2]`"></td>
        </tr></table>
      </div>
      <h3>源码</h3>
      <div class="padding_class font_big">
        <pre><code>
          &lt;div class=&quot;padding_class&quot; v-gridkeyfocus=&quot;gridKeyFlag&quot; :data-current=&quot;current3&quot; data-prefix=&quot;table_&quot;&gt;
          &lt;table&gt;
          &lt;tr v-for=&quot;(item,index) in tbData&quot; :key=&quot;item.id&quot;&gt;
          &lt;td&gt;&lt;input v-model=&quot;item.text&quot;  :ref=&quot;&#x60;table_${index}&#x60;&quot; @focus=&quot;current3=&#x60;table_${index}[0]&#x60;&quot;&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input :disabled=&quot;item.text3Disabeld&quot; v-model=&quot;item.text3&quot; :ref=&quot;&#x60;table_${index}&#x60;&quot; @focus=&quot;current3=&#x60;table_${index}[1]&#x60;&quot;&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input v-model=&quot;item.text2&quot; :ref=&quot;&#x60;table_${index}&#x60;&quot; @focus=&quot;current3=&#x60;table_${index}[2]&#x60;&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;&lt;/table&gt;
          &lt;/div&gt;
          data() {
            return {
              tbData:[{text:"",text2:"",text3:"",text3Disabeld:false,id:1},{text:"",text2:"",text3:"",text3Disabeld:true,id:2},{text:"",text2:"",text3:"",text3Disabeld:false,id:3}],
              gridKeyFlag:false,
              current3:1
            }
          },
        </code></pre>
      </div>
      <h3>原理</h3>
      <div class="padding_class">
        <p>1：通过 v-gridkeyfocus 绑定了该节点的 keyup事件</p>
        <p>2：通过 data-current的值 确定当前焦点的位置，同时通过 focus()方法对下一个进行定位</p>
        <p>3：提供了定位前的一些方法，通过这些方法可以控制 要从哪里定位到哪里，自定义式的进行跳转（默认是按顺序进行的）</p>
        <p>4：可以设置 disabled 属性，控制要不要跳过当前控件的定位</p>
      </div>
      <h3>属性</h3>
      <div class="padding_class">
        <table width="100%">
          <thead>
          <tr>
            <th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认</th>
          </tr>
          </thead>
          <tbody>
          <tr><td>v-gridkeyfocus="gridKeyFlag"</td><td>用于更新表格快捷键的（比如表格添加行后）</td><td>Boolean</td><td>true/false</td><td>-</td></tr>
          <tr><td>data-prefix</td><td>用于拼接ref名称时的前缀，默认为'keyRef_'</td><td>string</td><td>-</td><td>'keyRef_'</td></tr>
          <tr><td>:data-current</td><td>当前焦点的位置(必填)</td><td>string</td><td>-</td><td>-</td></tr>
          <tr><td>:before-next</td><td>顺向定位之前事件(注意：阻止默认，必须返回false)</td><td>function。返回参数：1.current代表还没有定位前的焦点的位置,2.vm代表即将定位的组件的vm；3.rowdata当前行数据（只有设置:data-rowdata属性才有效）；4.e</td><td>-</td><td>-</td></tr>
          <tr><td>:after-next</td><td>顺向定位之后事件</td><td>function。返回参数：1.vm代表即将定位的组件的vm；2.rowdata当前行数据（只有设置:data-rowdata属性才有效）；3.e</td><td>-</td><td>-</td></tr>
          <tr><td>:before-prev</td><td>逆向定位之前事件(注意：阻止默认必须返回false)</td><td>function.返回参数：1.current代表还没有定位前的焦点的位置；2.vm代表即将定位的组件的vm；3.rowdata当前行数据（只有设置:data-rowdata属性才有效）；4.e</td><td>-</td><td>-</td></tr>
          <tr><td>:after-prev</td><td>逆向定位之后事件</td><td>function。返回参数：1.vm代表即将定位的组件的vm；2.rowdata当前行数据（只有设置:data-rowdata属性才有效）；3.e</td><td>-</td><td>-</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  <script>
     new Vue({
       el: '#app',
       data() {
         return {
           tbData:[{text:"",text2:"",text3:"",text3Disabeld:false,id:1},{text:"",text2:"",text3:"",text3Disabeld:true,id:2},{text:"",text2:"",text3:"",text3Disabeld:false,id:3}],
           isPay: false,
           gridKeyFlag:false,
           current3:1
         }
       },
       mounted(){
         setTimeout(()=>{
           console.log("sss");
           this.gridKeyFlag=!this.gridKeyFlag;
         },2000);
         $('pre code').each(function(i, block) {
           hljs.highlightBlock(block);
         });
       }


     })
  </script>
  </body>
  <style>
    .padding_class{padding: 30px 20px;}
    h5{margin: 5px 20px;}
    .font_big{font-size: 18px;}
  </style>
</html>
